<template>
    <!-- <div class="main-box minHeightCss" v-loading="loading"> -->
	<div class="minHeightCss" v-loading="loading">
		<div class="dl-row mar-bottom-20">
			<div class="" style="margin-right: 20px;">
				<el-date-picker style="width: 400px;border-radius: 20px;"
						v-model="timeValue"
						type="daterange"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div v-if="data.length>0" >
			<div class="em-history-box border-main mar-bottom-20" v-for="(record,index) in data"
				 :key="index">
				<div class="title dl-row center">
					<h1>{{record.practiceName}}</h1>
					<span>完成时间：{{record.endTime}}</span>
				</div>
				<div class="dl-row-sb">
					<div>
						<ul class="em-score">
							<li>得分</li>
							<li>{{record.source}}</li>
						</ul>
					</div>
					<div>
						<el-button type="primary" plain round @click="routeClick(record.id)" v-if="record.isFinish==0">进入考试</el-button>
						<el-button type="primary" plain round @click="routeClick(record.id)" v-if="record.isFinish==1">查看详情</el-button>
						<el-button type="primary" plain round @click="bankLs(record)" v-if="record.isFinish==1">查看排名</el-button>
						<!-- <el-button type="primary" plain round @click="record.isDelete=0">收起</el-button> -->
					</div>
				</div>
				
			</div>
			<el-pagination
					:total="total" 
					:current-page="page + 1"
					style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes"
					@size-change="sizeChange"
					@current-change="pageChange"/>
		</div>
		<div v-if="data.length==0 && !loading">
		   <el-empty class="empty" :image-size="250" :image="require('../../../assets/no_data_images/no_exam.png')"></el-empty>
		</div>
		<rank-form ref="rkForm"></rank-form>
    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {getRank} from '@/api/check'
	//import {scoreBankList} from '@/api/practice'
	import { formateDate } from '@/utils/index'
	import rankForm from './rankFrom.vue'
    export default {
		loading:false,
        name: "collect",
        mixins: [initData],
		components: {rankForm},
        data() {
            return {
				typeQue: false,
				rankList:[],
				timeValue:[],
				showId:'',
                userImg: require('../../../assets/image/u353.png'),
                firstImg: require('../../../assets/image/first.png'),
                secondImg: require('../../../assets/image/second.png'),
                thirdImg: require('../../../assets/image/third.png'),
                type: 1,
				inputSearch:""
            }
        },
		filters: {
		  formateDate (time) {
			  if(time){
				 let date = new Date(time)
				 return formateDate(date, 'yyyy-MM-dd hh:mm:ss') 
			  }
		  }
		},
		created() {
			this.init()
		},
        methods: {
            beforeInit() {
                this.url = 'practice/record'
                this.params = {page: this.page, size: this.size}
                if(this.timeValue!=null && this.timeValue.length>0){
                	this.params.startTime=this.timeValue[0]
                	this.params.endTime=this.timeValue[1]
                }
                return true
            },
			bankLs(record){
				this.$refs.rkForm.dialog = true
				this.$refs.rkForm.bankId=record.bankId;
			},
            loadMore(checkId, resRank) {
                const params = {
                    checkId: checkId,
                    page: resRank.pagination.current,
                    size: resRank.pagination.size
                }
                getRank(params).then(res => {
                    resRank.pagination.current = res.pagination.current
                    resRank.pagination.size = res.pagination.size
                    resRank.pagination.total = res.pagination.total
                    resRank.pagination.records = resRank.pagination.records.concat(res.pagination.records)
                })
            },
            routeClick(id) {
                this.$router.push({
                    path: "/bank/practiceDetails",
                    query: {practiceId: id}
                })
            },
            showDetails(id){
				this.typeQue=true;
            	//this.showId=id;
            }
        }
    }
</script>

<style lang="scss" scoped>
	.minHeightCss{
		 min-height: calc(100vh - 274px);
	}
	.empty{
		 height: calc(100vh - 254px);
	}
    .class-box {
        .left {
            width: 230px;
            padding: 25px 0;

            .bg-blue-500 {
                background: #0068B6;
            }

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }
        }

        .right {
            width: 1110px;
        }
    }

    .calendar-box {
        .calendar {
            width: 440px;
        }
    ;

        .calendar-right {
            width: 570px;

            .title {
                margin-bottom: 15px;

                h5 {
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                    margin-right: 20px;
                }

                p {
                    font-size: 18px;
                    color: #333333;
                }
            }

        }
    ;
    }

    .calendar-item {
        background: #FFF5F3;
        border-radius: 10px 10px 10px 10px;
        padding: 15px;
        margin-bottom: 15px;

        h1 {
            font-size: 18px;
            font-weight: bold;
            color: #F45333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 8px;
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .time {
            font-size: 12px;
            font-weight: 400;
            color: #545C63;
            line-height: 14px;

            span {
                margin-right: 15px;
            }
        }
    }

    .em-history-box {
        .title {
            margin-bottom: 15px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
                margin-right: 20px;
            }

            span {
                font-size: 12px;
                color: #999999;
            }
        }
    }
</style>
